<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>钢琴</title>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<style type="text/css">
		.container { width:100%; text-align: center;}
		body { padding: 0; margin: 0; min-width: 1366px; overflow: hidden;}
		#qin { height: 200px; background: #000; position: relative; margin-bottom: 200px; }
		#wkey { list-style: none;padding: 0; margin: 0; position: absolute;top:50px; width:100%;}
		#wkey li { height: 270px;width:1.923%; background: #fff; float: left; border: 1px solid #ccc;  border-radius: 5px;
			font:14px/100px impact; text-align: center; color: #ccc;box-shadow: 1px 1px 3px #999;transition:all .5s ease-in;
			-ms-box-sizing:border-box;     
			-moz-box-sizing:border-box;     
			box-sizing:border-box;      
			-moz-user-select:none;
			-webkit-user-select:none;
			user-select:none;}
		#bkey { list-style: none;padding: 0; margin: 0; position: absolute;top:20px; width:100%; margin:0 0.9615%;}
		#bkey li { height: 170px;width:1.923%; background: #333; float: left; border: 1px solid #666; border-radius: 5px;
			font:14px/100px impact; text-align: center; color: #666;box-shadow: 1px 1px 3px #999;transition:all .5s ease-in; 
			-ms-box-sizing:border-box;     
			-moz-box-sizing:border-box;     
			box-sizing:border-box;      			     
			-moz-user-select:none;
			-webkit-user-select:none;
			user-select:none;}
		#bkey li:hover,#bkey li.active { background-color: #222;box-shadow: 1px 1px 3px #333; color: red;transition:all .01s ease-in;  }
		progress {width:100%;}			

		#wkey li:hover,#wkey li.active { background-color: #ddd;box-shadow: 1px 1px 3px #333; color: red;transition:all .01s ease-in;  }
		progress { margin: 0 auto;
			    display: inline-block;
			    width: 500px;
			    height: 20px;
			    border-radius: 3px;
			    border: 1px solid #666;  
			    background-color:#ddd;
			    color: #ddd; /*IE10*/
		}
		progress::-moz-progress-bar { background: #ddd; }
		progress::-webkit-progress-bar { background: #ddd; }
		progress::-webkit-progress-value  { background: #666; }
		#fang { width:200px; height: 200px; background: #ccc; border-bottom: 1px solid #000; box-shadow: 1px 1px 5px #999; border-radius: 5px;}
		h1 {font:100 3em/2 Verdana, Geneva, Arial, Helvetica, sans-serif; color:#ccc;}
		h5 {font:100 1em/2 Verdana, Geneva, Arial, Helvetica, sans-serif; color:#999;}
	</style>
</head>
<body onkeydown="getCommend(event)";>

	<div class="container">
		<h1>ELECTRONIC PIANO</h1>
		<div id="qin">
			<ul id="wkey"></ul>
 			<ul id="bkey"></ul>
		</div>
		<h5 id="msg">LOADING</h5>
		<progress id="progress" value="0" max="88"></progress>
	</div>
<script type="text/javascript">
	var wkeys = "";
	var bkeys = "";
	var bnull = [0,2,5,7,10,12,15,17,20,22,25,27,30,32,35]
	var loading = 0;

	for(var i=0; i<52;i++){
		wkeys += "<li>"+i+"</li>"
	}
	$("#wkey").append(wkeys);

	for(var i=0; i<36;i++){
		bkeys += "<li>"+i+"</li>"
	}
	$("#bkey").append(bkeys);

	for(var i=0;i<bnull.length;i++){
		$("#bkey li").eq(bnull[i]).css("margin-right","1.923%");	
	}
	
	var audios = [];
	var baudios = [];	
	var flag = false;
	for(var i=0;i<52;i++){
		var audio = new Audio(""+i+".ogg");
		audio.addEventListener("canplaythrough", function () {
		load();	
		console.log("loading:"+loading);
		}, false);
		audios[i]=audio;	
	}

	for(var i=0;i<36;i++){
		var baudio = new Audio("n/"+i+".ogg");
		baudio.addEventListener("canplaythrough", function () {
		load();	
		console.log("load:"+loading);
		}, false);
		baudios[i]=baudio;	
	}	
	function load(){
		loading++;
		$("#progress").val(loading);
		if(loading>87){
			$("#progress").remove();
			$("#msg").text("Loaded").fadeOut(3000);
		}
	}

//white -----------------

	$("#wkey li").click(function(){
		audios[$(this).text()].currentTime = 0;
		audios[$(this).text()].play();
	});
	$("#wkey li").mousedown(function(){
		flag=true;
	});
	$("#wkey li").mouseup(function(){
		flag=false;
		$("#wkey li").removeClass("active");
		$("#bkey li").removeClass("active");
	});
	$("#wkey li").mouseover(function(){
		if(flag){
			$(this).addClass("active");
			audios[$(this).text()].currentTime = 0;
			audios[$(this).text()].play();
		}
	});
	$("#wkey li").mouseout(function(){
		if(flag){
			$(this).removeClass("active");
		}
	});	

//black---------------------------

	$("#bkey li").click(function(){
		audios[$(this).text()].currentTime = 0;
		audios[$(this).text()].play();
	});
	$("#bkey li").mousedown(function(){
		flag=true;
	});
	$("#bkey li").mouseup(function(){
		flag=false;
		$("#wkey li").removeClass("active");
		$("#bkey li").removeClass("active");
	});
	$("#bkey li").mouseover(function(){
		if(flag){
			$(this).addClass("active");
			audios[$(this).text()].currentTime = 0;
			audios[$(this).text()].play();
		}
	});
	$("#bkey li").mouseout(function(){
		if(flag){
			$(this).removeClass("active");
		}
	});	

	function playaudio(index){
		$("#wkey li").eq(index).addClass("active");
		audios[index].currentTime = 0;
		audios[index].play();
		audios[index].addEventListener("ended", function () {
			$("#wkey li").eq(index).removeClass("active");
		},false);
		
	}


function getCommend(evt){
	var code = window.event?evt.keyCode:evt.which;
	switch(code){
		case 90:
			playaudio(9);
		break;
		case 88:
			playaudio(10);
		break;
		case 67:
			playaudio(11);
		break;
		case 86:
			playaudio(12);
		break;
		case 66:
			playaudio(13);
		break;
		case 78:
			playaudio(14);
		break;
		case 77:
			playaudio(15);
		break;

		case 65:
			playaudio(16);
		break;
		case 83:
			playaudio(17);
		break;
		case 68:
			playaudio(18);
		break;
		case 70:
			playaudio(19);
		break;
		case 71:
			playaudio(20);
		break;
		case 72:
			playaudio(21);
		break;
		case 74:
			playaudio(22);
		break;

		case 81:
			playaudio(23);
		break;
		case 87:
			playaudio(24);
		break;
		case 69:
			playaudio(25);
		break;
		case 82:
			playaudio(26);
		break;
		case 84:
			playaudio(27);
		break;
		case 89:
			playaudio(28);
		break;
		case 85:
			playaudio(29);
		break;

		case 49:
			playaudio(30);
		break;
		case 50:
			playaudio(31);
		break;
		case 51:
			playaudio(32);
		break;
		case 52:
			playaudio(33);
		break;
		case 53:
			playaudio(34);
		break;
		case 54:
			playaudio(35);
		break;
		case 55:
			playaudio(36);
		break;
	}
}





</script>
</body>
</html>